<template>
  <div class="spec-preview">
    
    <vue-photo-zoom-pro 
    :high-url="newimg || img"
    :out-zoomer="true"
    :width="200"
    :height="200"
    :selector="true"
    >
        <img :src="newimg || img" style="height:200px;" />
    </vue-photo-zoom-pro>
  </div>
</template>

<script>
  import vuePhotoZoomPro from 'vue-photo-zoom-pro'
  import 'vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css'
  export default {
    name: "Zoom",
    props:["img"],
    data(){
      return {
        newimg:""
      }
    },
    components: {
      vuePhotoZoomPro,
    },
    mounted(){
      // 创建自定义事件接受图片
      this.$bus.$on("getimgurl",(value)=>{
       
          this.newimg = value;
      })
    }
  }
</script>

<style lang="less">
  .spec-preview {
    position: relative;
    width: 400px;
    height: 400px;
    border: 1px solid #ccc;

    img {
      width: 100% !important;
      height: 100% !important;
    }
    .zoomer{
        z-index: 1;
        top: 0 !important;
        left: 10px !important;
    }
    .selector {
          background: rgba(230, 50, 5, .3) !important;
    }

    

    
   
  }
</style>